<template>
  <view class="myTop">
    <view class="userInfo">
      <image
        class="userAvatar"
        :src="UserInfo.avatarUrl ? UserInfo.avatarUrl : '/static/init/user.png'"
      />
      <view class="userLogin" @click="goToLogin('/pages/login/index')">
        <view class="userName">{{ UserInfo.nickName || '尚未登录' }}</view>
        <view class="userStatus">{{ '点击登录' }}</view>
      </view>
    </view>
  </view>

  <uni-card is-full>
    <uni-grid :column="4" :showBorder="false" :square="false">
      <uni-grid-item v-for="(item, index) in gridInfo" :key="index">
        <view class="menuItem" @click="goTo(item.path)">
          <image class="menuIcon" :src="item.imgUrl" lazy-load />
          <uni-badge
            size="small"
            :text="item.number"
            absolute="rightTop"
            :offset="[-5, 0]"
            type="error"
          >
            <view class="menuText">{{ item.text }}</view>
          </uni-badge>
        </view>
      </uni-grid-item>
    </uni-grid>
  </uni-card>

  <uni-list>
    <uni-list-item
      show-extra-icon
      showArrow
      clickable
      :extra-icon="{ color: '#6366F1', size: '22', type: item.icon }"
      :title="item.title"
      :rightText="item.rightText"
      v-for="(item, index) in listInfo"
      :key="index"
      @click="goTo(item.path)"
    />
  </uni-list>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { goTo } from '@/utils/publicFuc'
const UserInfo = useUserStore()

const goToLogin = (path: string) => {
  //   if (UserInfo.nickName) return
  goTo(path)
}
// 中间菜单宫格
const gridInfo = reactive([
  { imgUrl: '/static/cs/gridMenu/icon1.png', text: '测试1', path: '', number: 2 },
  { imgUrl: '/static/cs/gridMenu/icon2.png', text: '测试2', path: '', number: 20 },
  { imgUrl: '/static/cs/gridMenu/icon3.png', text: '测试3', path: '', number: 999 },
  { imgUrl: '/static/cs/gridMenu/icon4.png', text: '测试4', path: '', number: 0 },
])

// 下方list菜单
const listInfo = reactive([
  { icon: 'email', path: '', title: '我要反馈', rightText: '给我们提个意见或者建议' },
  { icon: 'flag', path: '', title: '隐私政策', rightText: '隐私政策' },
  { icon: 'star', path: '', title: '版本说明', rightText: '版本说明' },
  { icon: 'more', path: '', title: '关于我们', rightText: '关于我们' },
])
</script>

<style lang="scss" scoped>
.myTop {
  @apply relative h-44 bg-gradient-to-br from-yellow-100 to-green-500 text-white;
  .userInfo {
    @apply absolute w-full left-0 bottom-6 px-4 flex;
    .userAvatar {
      @apply w-20 h-20 rounded-full;
    }
    .userLogin {
      @apply mx-3 flex flex-col justify-evenly;
      .userName {
        @apply text-2xl font-medium;
      }
      .userStatus {
        @apply text-sm;
      }
    }
  }
}

.menuItem {
  @apply flex flex-col justify-between items-center py-2;
  .menuIcon {
    @apply w-12 h-12;
  }
}
</style>
